<template>
  <div class="flex">
    <div class="tinymce-box">
      <h1>笔记</h1>
      <tinymce-edit v-model:html="noteContent" v-model:text="noteText" height="500px" />
      <div class="flex jce foot">
        <el-button type="primary" @click="saveNote" :disabled="!noteContent">记录一下</el-button>
      </div>
    </div>
    <div class="note-list-content">
      <div class="header flex aic jce">
        <el-dropdown>
          <span class="el-dropdown-link">
            排序
            <el-icon class="el-icon--right">
              <arrow-down />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click=";(sorted = 'asc'), getNotesList()"
                ><el-icon><ArrowUp /></el-icon>按时间</el-dropdown-item
              >
              <el-dropdown-item @click=";(sorted = 'desc'), getNotesList()"
                ><el-icon><ArrowDown /></el-icon>按时间</el-dropdown-item
              >
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
      <div v-if="total > 0" class="box" v-loading="loading">
        <el-card v-for="(item, index) in noteList" :key="index" @mouseenter="item.showDel = true" @mouseleave="item.showDel = false" style="width: 100%; margin: 15px 0; position: relative" shadow="hover">
          <div class="item-note">
            <span>{{ item.createdAt }}</span>
            <p v-if="!item.isEdit">{{ item.text }}</p>
            <div v-else>
              <tinymce-edit height="300px" v-model:html="item.content" v-model:text="item.text" />
              <div class="flex jce" style="margin-top: 15px">
                <el-button @click="item.isEdit = false">取消</el-button>
                <el-button type="primary" @click="editSaveNote(item)" :disabled="!item.content">保存</el-button>
              </div>
            </div>
          </div>
          <div class="btn" v-if="!item.isEdit" v-show="item.showDel">
            <el-button icon="Edit" circle @click="editNote(item)"></el-button>
            <el-button icon="Delete" circle type="danger" plain @click="delNote(item.id)"></el-button>
          </div>
        </el-card>
      </div>
      <data-empty v-else></data-empty>
      <div class="paginator-content">
        <el-pagination style="justify-content: center" :hide-on-single-page="true" :page-size="pageSize" :page-count="maxPage ? maxPage : 1" :pager-count="7" layout="total, prev, pager, next" :total="total" @current-change="handleCurrentChange"></el-pagination>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { mAxios, encodeURL } from '~/utils/axios/axios.js'
const userId = Number(sessionStorage.getItem('user_id'))
const noteContent = ref('')
const noteText = ref('')
const editNote = note => {
  noteList.value.forEach(item => {
    item.isEdit = false
  })
  note.isEdit = true
}
const editSaveNote = note => {
  mAxios.put('note', note).then(res => {
    note.isEdit = false
    res.data.succeed ? ElMessage.success('保存成功') : ElMessage.error('保存失败')
    getNotesList()
  })
}
const saveNote = () => {
  mAxios.post('note', { userId, content: noteContent.value, text: noteText.value }).then(res => {
    res.data.succeed ? ElMessage.success('保存成功') : ElMessage.error('保存失败')
    noteContent.value = ''
    noteText.value = ''
    getNotesList()
  })
}
const delNote = id => {
  ElMessageBox.confirm('确定要删除该条记录？', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    center: false,
    closeOnClickModal: false,
    type: 'warning'
  }).then(() => {
    mAxios.delete('note/' + id).then(res => {
      res.data.succeed ? ElMessage.success('删除成功') : ElMessage.error('删除失败')
      getNotesList()
    })
  })
}
const loading = ref(false)
const sorted = ref('desc')
const total = ref(0)
const currentPage = ref(1)
const pageSize = ref(10)
const maxPage = computed(() => {
  return total.value > 10000 ? Math.ceil(10000 / pageSize.value) : Math.ceil(total.value / pageSize.value)
})
// 翻页
const handleCurrentChange = page => {
  currentPage.value = page
  getNotesList()
}
const noteList = ref([])
const getNotesList = () => {
  const params = {
    page: currentPage.value,
    size: pageSize.value,
    sorted: sorted.value
  }
  loading.value = true
  mAxios.get(`note/${userId}`, { params: encodeURL(params) }).then(res => {
    loading.value = false
    noteList.value = res.data.data.rows
    total.value = res.data.data.total
  })
}
onMounted(() => {
  getNotesList()
})
</script>

<style lang="scss" scoped>
.tinymce-box {
  width: 40%;
  padding: 20px;
  border-right: 1px solid #eee;
  background: #fff;
  h1 {
    font-size: 20px;
    margin: 0 0 20px 0;
  }
  .foot {
    margin-top: 15px;
  }
}
.note-list-content {
  width: 60%;
  background: #f7f7f7;
  .header {
    padding: 25px;
    border-bottom: 1px solid #ddd;
  }
  .box {
    padding: 0 15px;
    .item-note {
      width: 100%;
      span {
        display: block;
        color: #c0c0c0;
        font-size: 12px;
        margin-bottom: 10px;
      }
      p {
        width: 50%;
        color: #7b7b7b;
        font-size: 16px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    .btn {
      position: absolute;
      top: 25px;
      right: 25px;
    }
  }
}
</style>
